<template>
  <div class="recheck-component-container">
    <div class="page-header">
      <h1 class="page-title">试卷复审详情</h1>
      <el-button type="primary" @click="backToRecheckTask()" class="back-button">
        <el-icon><ArrowLeft /></el-icon>
        返回复审任务管理
      </el-button>
    </div>
    
    <div class="info-cards-container">
      <el-card class="info-card exam-info" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><Reading /></el-icon>
            <span>考试信息</span>
          </div>
        </template>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">考试名称：</span>
            <span class="info-value">{{ recheckPaperDetails.examinationData?.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷满分：</span>
            <span class="info-value highlight">{{ recheckPaperDetails.examinationData?.paperFullMark }}</span>
          </div>
          <div class="info-item full-width">
            <span class="info-label">考试时间：</span>
            <span class="info-value">{{ formatTime(recheckPaperDetails.examinationData?.startTime) }} 至 {{ formatTime(recheckPaperDetails.examinationData?.endTime) }}</span>
          </div>
        </div>
      </el-card>
      
      <el-card class="info-card student-info" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><User /></el-icon>
            <span>学生信息</span>
          </div>
        </template>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">学生姓名：</span>
            <span class="info-value">{{ recheckPaperDetails.studentData?.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">学生学号：</span>
            <span class="info-value">{{ recheckPaperDetails.studentData?.account }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">学生班级：</span>
            <span class="info-value">{{ recheckPaperDetails.studentData?.classesName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">原总分数：</span>
            <span class="info-value original-score">{{ recheckPaperDetails.studentData?.totalScore }}</span>
          </div>
        </div>
      </el-card>
      
      <el-card class="info-card progress-info" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><View /></el-icon>
            <span>批改进度</span>
          </div>
        </template>
        <div class="progress-container">
          <el-progress 
            type="circle" 
            :percentage="recheckPaperDetails?.doneTotal && recheckPaperDetails?.total ? Math.round(recheckPaperDetails.doneTotal / recheckPaperDetails.total * 100) : 0"
            :stroke-width="10"
            :width="120"
            :status="recheckPaperDetails?.doneTotal === recheckPaperDetails?.total ? 'success' : 'warning'"
          ></el-progress>
          <div class="progress-details">
            <div class="progress-item">
              <span class="progress-label">需批改：</span>
              <span class="progress-value">{{ recheckPaperDetails?.total }} 道</span>
            </div>
            <div class="progress-item">
              <span class="progress-label">已批改：</span>
              <span class="progress-value">{{ recheckPaperDetails?.doneTotal }} 道</span>
            </div>
            <div class="progress-item">
              <span class="progress-label">剩余：</span>
              <span class="progress-value">{{ recheckPaperDetails?.total - recheckPaperDetails?.doneTotal }} 道</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <el-card class="paper-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Document /></el-icon>
          <span>试卷详情</span>
        </div>
      </template>
      
      <div class="questions-section">
        <div class="section-header">
          <el-icon><Collection /></el-icon>
          <h3>客观题</h3>
        </div>
        
        <el-collapse accordion class="questions-collapse">
          <el-collapse-item v-for="(item, index) in recheckPaperDetails.objective" :key="index">
            <template #title>
              <div class="question-title">
                <span class="question-order">{{ item.questionOrder }}.</span>
                <span class="question-name">{{ item.questionName }}</span>
                <span class="question-score">({{ item.score }}分)</span>
                <el-tag 
                  size="small" 
                  :type="item.status === 0 ? 'warning' : 'success'"
                  effect="light"
                  class="question-status-tag"
                >
                  {{ item.status === 0 ? '未复审' : '已复审' }}
                </el-tag>
              </div>
            </template>
            
            <div class="question-content">
              <div class="content-options">
                <div v-for="(value, key) in item.questionContent" :key="key" class="option-item">
                  <span class="option-key">{{ key }}.</span>
                  <span class="option-value">{{ value }}</span>
                </div>
              </div>
              
              <div class="answer-section">
                <div class="answer-item">
                  <span class="answer-label">标准答案：</span>
                  <span class="answer-value correct">{{ item.questionAnswer }}</span>
                </div>
                <div class="answer-item">
                  <span class="answer-label">学生答案：</span>
                  <span class="answer-value" :class="{'correct': item.studentAnswer === item.questionAnswer, 'wrong': item.studentAnswer !== item.questionAnswer}">
                    {{ item.studentAnswer }}
                  </span>
                </div>
                <div class="answer-item">
                  <span class="answer-label">原得分：</span>
                  <span class="answer-value score">{{ item.finalScore }}</span>
                </div>
              </div>
              
              <div class="review-section">
                <span class="review-label">复审得分：</span>
                <el-input-number 
                  :disabled="recheckPaperDetails?.recheckStatus === 2"
                  v-model="item.recheckDetailFinalScore" 
                  :min="0" 
                  :max="item.score" 
                  :step="0.5" 
                  size="large"
                  class="score-input-number"
                  controls-position="right"
                ></el-input-number>
                <el-button 
                  type="primary" 
                  @click="saveRecheckOfHook(item)"
                  :disabled="recheckPaperDetails?.recheckStatus === 2"
                  class="save-button"
                >
                  <el-icon><Check /></el-icon>
                  保存
                </el-button>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      
      <div class="questions-section">
        <div class="section-header">
          <el-icon><EditPen /></el-icon>
          <h3>主观题</h3>
        </div>
        
        <el-collapse accordion class="questions-collapse">
          <el-collapse-item v-for="(item, index) in recheckPaperDetails.subjective" :key="index">
            <template #title>
              <div class="question-title">
                <span class="question-order">{{ item.questionOrder }}.</span>
                <span class="question-name">{{ item.questionName }}</span>
                <span class="question-score">({{ item.score }}分)</span>
                <el-tag 
                  size="small" 
                  :type="item.status === 0 ? 'warning' : 'success'"
                  effect="light"
                  class="question-status-tag"
                >
                  {{ item.status === 0 ? '未复审' : '已复审' }}
                </el-tag>
              </div>
            </template>
            
            <div class="question-content">
              <div class="content-section">
                <div class="content-label">问题描述：</div>
                <div class="content-value">{{ item.questionContent }}</div>
              </div>
              
              <div class="answer-section subjective">
                <div class="answer-item full-width">
                  <span class="answer-label">参考答案：</span>
                  <div class="answer-value reference">{{ item.referenceAnswer }}</div>
                </div>
                
                <div class="answer-item full-width">
                  <span class="answer-label">学生答案：</span>
                  <div class="answer-value student">{{ item.studentAnswer }}</div>
                </div>
                
                <div class="answer-item">
                  <span class="answer-label">原得分：</span>
                  <span class="answer-value score">{{ item.finalScore }}</span>
                </div>
              </div>
              
              <div class="grading-section">
                <div class="grading-title">评分细则：</div>
                <div class="grading-rules">
                  <div v-for="(rule, ruleIndex) in item.gradingRules" :key="ruleIndex" class="rule-item">
                    <el-icon><Check /></el-icon>
                    <span>{{ rule }}</span>
                  </div>
                </div>
              </div>
              
              <div class="review-section">
                <span class="review-label">复审得分：</span>
                <el-input-number 
                  :disabled="recheckPaperDetails?.recheckStatus === 2"
                  v-model="item.recheckDetailFinalScore" 
                  :min="0" 
                  :max="item.score" 
                  :step="0.5" 
                  size="large"
                  class="score-input-number"
                  controls-position="right"
                ></el-input-number>
                <el-button 
                  type="primary" 
                  @click="saveRecheckOfHook(item)"
                  :disabled="recheckPaperDetails?.recheckStatus === 2"
                  class="save-button"
                >
                  <el-icon><Check /></el-icon>
                  保存
                </el-button>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      
      <div class="submit-section">
        <el-popconfirm
          title="确定要提交全部审查吗？一旦提交，将无法修改"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="handleRecheckOfHook(recheckId,recheckRequestId)"
          :disabled="recheckPaperDetails?.recheckStatus === 2"
        >
          <template #reference>
            <el-button type="primary">提交全部审查</el-button>
          </template>
        </el-popconfirm>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import useRecheckTask from '@/hooks/server/useRecheckTask'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, computed } from 'vue'
import { 
  ArrowLeft, 
  Reading, 
  User, 
  View, 
  Document, 
  Collection, 
  EditPen, 
  Check, 
  CircleCheck 
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const { recheckId, recheckRequestId } = route.query

const { 
  recheckPaperDetails,
  getRecheckPaperDetailsOfHook,

  saveRecheckOfHook,
  handleRecheckOfHook,

 } = useRecheckTask()

onMounted(async () => {
  await getRecheckPaperDetailsOfHook(route.query.recheckId)
})

const backToRecheckTask = () => {
  router.go(-1)
}

// 格式化时间的方法
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

</script>

<style scoped lang="scss">
.recheck-component-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  position: relative;
  padding-left: 16px;
  letter-spacing: 0.01em;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 28px;
    background: linear-gradient(45deg, #409EFF, #64B5F6);
    border-radius: 3px;
  }
}

.back-button {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-weight: 600;
  
  .el-icon {
    margin-right: 8px;
  }
}

.info-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  
  @media (max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.info-card {
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  &.exam-info {
    .card-header {
      background: linear-gradient(to right, #ecf5ff, #d8ebff);
      
      .el-icon {
        color: #409EFF;
      }
    }
  }
  
  &.student-info {
    .card-header {
      background: linear-gradient(to right, #f0f9eb, #e1f3d8);
      
      .el-icon {
        color: #67c23a;
      }
    }
  }
  
  &.progress-info {
    .card-header {
      background: linear-gradient(to right, #fdf6ec, #faecd8);
      
      .el-icon {
        color: #e6a23c;
      }
    }
  }
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  
  .el-icon {
    font-size: 20px;
    margin-right: 10px;
  }
  
  span {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
  
  .info-item {
    display: flex;
    flex-direction: column;
    
    &.full-width {
      grid-column: span 2;
    }
    
    .info-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 4px;
    }
    
    .info-value {
      font-size: 16px;
      color: #303133;
      font-weight: 500;
      
      &.highlight {
        color: #409EFF;
        font-weight: 600;
      }
      
      &.original-score {
        color: #f56c6c;
        font-weight: 600;
      }
    }
  }
}

.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
  gap: 30px;
  
  .progress-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .progress-item {
      display: flex;
      align-items: center;
      
      .progress-label {
        width: 70px;
        font-size: 14px;
        color: #909399;
      }
      
      .progress-value {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
}

.paper-card {
  border-radius: 12px;
  margin-bottom: 30px;
  
  .questions-section {
    margin-bottom: 30px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e0e0e0;
    
    .el-icon {
      font-size: 20px;
      margin-right: 10px;
      color: #409EFF;
    }
    
    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
    }
  }
}

.questions-collapse {
  border: none;
  
  :deep(.el-collapse-item__header) {
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: none;
    margin-bottom: 8px;
    transition: all 0.3s;
    
    &:hover {
      background-color: #f0f7ff;
    }
    
    &.is-active {
      background-color: #ecf5ff;
    }
  }
  
  :deep(.el-collapse-item__wrap) {
    border: none;
    background-color: transparent;
  }
  
  :deep(.el-collapse-item__content) {
    padding: 20px 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
  }
}

.question-title {
  display: flex;
  align-items: center;
  
  .question-order {
    font-weight: 600;
    color: #409EFF;
    margin-right: 8px;
  }
  
  .question-name {
    font-weight: 600;
    color: #303133;
    flex: 1;
  }
  
  .question-score {
    margin: 0 12px;
    color: #f56c6c;
  }
  
  .question-status-tag {
    margin-left: auto;
  }
}

.question-content {
  .content-options {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    
    .option-item {
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .option-key {
        font-weight: 600;
        color: #409EFF;
        margin-right: 8px;
      }
      
      .option-value {
        color: #303133;
      }
    }
  }
  
  .content-section {
    margin-bottom: 20px;
    
    .content-label {
      font-weight: 600;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .content-value {
      padding: 16px;
      background-color: #f8f9fa;
      border-radius: 8px;
      line-height: 1.6;
    }
  }
  
  .answer-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    
    &.subjective {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .answer-item {
      display: flex;
      flex-direction: column;
      
      &.full-width {
        grid-column: 1 / -1;
      }
      
      .answer-label {
        font-weight: 600;
        color: #606266;
        margin-bottom: 8px;
      }
      
      .answer-value {
        color: #303133;
        
        &.score {
          font-weight: 600;
          color: #f56c6c;
        }
        
        &.correct {
          color: #67c23a;
        }
        
        &.wrong {
          color: #f56c6c;
        }
        
        &.reference, &.student {
          padding: 16px;
          background-color: #f8f9fa;
          border-radius: 8px;
          white-space: pre-wrap;
          line-height: 1.6;
        }
        
        &.reference {
          background-color: #f0f9eb;
        }
        
        &.student {
          background-color: #ecf5ff;
        }
      }
    }
  }
  
  .grading-section {
    margin-bottom: 20px;
    
    .grading-title {
      font-weight: 600;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .grading-rules {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      background-color: #f8f9fa;
      border-radius: 8px;
      
      .rule-item {
        display: flex;
        align-items: flex-start;
        
        .el-icon {
          color: #67c23a;
          margin-right: 8px;
          margin-top: 3px;
        }
      }
    }
  }
  
  .review-section {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #ecf5ff;
    border-radius: 8px;
    
    .review-label {
      font-weight: 600;
      color: #409EFF;
      margin-right: 16px;
      min-width: 80px;
    }
    
    .score-input-number {
      margin-right: 16px;
      width: 160px;
    }
    
    .save-button {
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 4px;
      }
    }
  }
}

.submit-section {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  
  .submit-button {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(to right, #409EFF, #64B5F6);
    border: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    
    .el-icon {
      margin-right: 8px;
      font-size: 18px;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(64, 158, 255, 0.2);
    }
    
    &:active {
      transform: translateY(0);
    }
    
    &:disabled {
      opacity: 0.7;
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .recheck-component-container {
    padding: 15px;
  }
  
  .page-title {
    font-size: 22px;
  }
  
  .review-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    
    .review-label {
      margin-right: 0;
      margin-bottom: 8px;
    }
    
    .score-input-number {
      margin-right: 0;
      margin-bottom: 12px;
      width: 100%;
    }
    
    .save-button {
      width: 100%;
    }
  }
}
</style>
